<template>
  <div class="app-container">
    <el-table :data="data" style="width: 100%" border>
      <!--      序号-->
      <el-table-column prop="date" label="序号" width="80" align="center">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.$index + (currentPage - 1) * eachPage + 1 }}</span>
        </template>
      </el-table-column>

      <!--      文章名称-->
      <el-table-column prop="title" label="文章名称" width="180" align="center">
        <template slot-scope="scope">
          <el-popover placement="top-start" title="博客预览图" width="200" trigger="hover">

            <!--写死图片可以预览，-->
            <!--<el-button slot="reference">hover 激活</el-button>-->
            <!--            <el-image-->
            <!--              style="width: 180px;"-->
            <!--              src="https://s1.aigei.com/src/img/gif/c6/c65dcaf9f7d94993a42b6587b9b2afd0.gif?imageMogr2/auto-orient/thumbnail/!282x282r/gravity/Center/crop/282x282/quality/85/%7CimageView2/2/w/282&e=2051020800&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:zqOM776mAoCyfv7OgwnUWMYYPqg="-->
            <!--              :preview-src-list="srcList"-->
            <!--              fit="contain">-->
            <!--              &lt;!&ndash;:src="scope.row.thumb"&ndash;&gt;-->
            <!--            </el-image>-->
            <el-image style="width: 180px;" :src="scope.row.thumb" :preview-src-list="srcList" fit="contain">
            </el-image>

            <!--    测试预览图地址-->
            <div>{{ scope.row.thumb }}</div>
            <a style="width:100%;height:100%;display:inline-block" href="#" target="_blank"
              @click.prevent="gouToTitleImgHandle(scope.row)" slot="reference">{{
                scope.row.title
              }}</a>
          </el-popover>
        </template>
      </el-table-column>

      <!--      文章描述-->
      <el-table-column prop=" description" label="文章描述">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.description }}</span>
        </template>
      </el-table-column>

      <!--      浏览数-->
      <el-table-column prop="description" align="center" width="100" label="浏览数">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.scanNumber }}</span>
        </template>
      </el-table-column>

      <!--      品论量-->
      <el-table-column prop="description" align="center" width="100" label="品论量">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.commentNumber }}</span>
        </template>
      </el-table-column>

      <!--      所属分类-->
      <el-table-column prop="description" align="center" width="120" label="所属分类">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.category ? scope.row.category.name : '未you分类' }}</span>
        </template>
      </el-table-column>

      <!--      创建日期-->
      <el-table-column prop="description" align="center" label="创建日期">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ formatTimestamp(scope.row.createDate) }}</span>
        </template>
      </el-table-column>

      <!--      操作-->
      <el-table-column prop="description" width="150" label="操作" align="center">
        <!--【删除】和【编辑】 按钮-->
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="编辑" placement="top" :hide-after=1200>
            <el-button type="primary" icon="el-icon-edit" circle size="mini"
              @click="editBlogInfo_Handle(scope.row)"></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="Delete" placement="top" :hide-after=1200>
            <el-button type="danger" icon="el-icon-delete" size="mini" circle
              @click.prevent="delete_One_Blog_Handle(scope.row)"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>

    </el-table>

    <!--分页按钮-->
    <el-pagination background :page-sizes="[2, 5, 10, 15, 20]" :page-size="eachPage"
      layout="prev, pager, next,total, ->,sizes, jumper" :current-page.sync="pageCurrentPage" :total="count"
      style="margin-top:20px;" @size-change="sizeChange_Handle" @current-change="currentChange_Handle"
      @prev-click="prevClick_Handle" @next-click="nextClick_Handle">
    </el-pagination>
  </div>
</template>

<script>
import { getPageBlog, deleteOneBlog } from "@/api/blog.js"
import { formatTimestamp } from "@/utils/loos.js"
import { URL_CONFIG, FRONT_URL } from "@/urlConfig.js"

export default {
  data() {
    return {
      data: [],
      srcList: [],
      eachPage: 5,//【每页显示多少条数据】
      currentPage: 1,//【当前页码，默认进来1】
      totalPage: 0,//【总页数】
      count: 0,//【数据总条数】
      pageCurrentPage: 1,//【分页栏当前页码】
    }
  },
  created() {
    const count = sessionStorage.getItem('refreshCount');
    count >= 1 ? sessionStorage.setItem('refreshCount', 0) : 0
    // console.log(count, '次数事实上事实上少时诵诗书飒飒飒')

    this.getPageBlog_Data()
  },
  methods: {
    formatTimestamp, //定义时间戳方法
    getPageBlog_Data() {
      getPageBlog(this.currentPage, this.eachPage).then(({ data }) => { //解构data
        console.log(data, 'created开始拿getPageBlog数据')
        this.data = data.rows
        for (const item of this.data) {
          // item.thumb = URL_CONFIG + item.thumb
          this.srcList.push(item.thumb)
        }
        this.count = data.total
        this.totalPage = Math.ceil(this.count / this.eachPage)//向上取整【一页总数据=数据总量/每页多少条】
        // 【当 当前页码>总页数，总页数页码 ->赋值-> 当前页码
        if (this.currentPage > this.totalPage) { //
          this.currentPage = this.totalPage
          //   【并且重新拿数据
          this.getPageBlog_Data()
        }
      })
    },

    // 打开文章
    gouToTitleImgHandle(data) {
      console.log("点击了某个文章数据：：", data)
      window.open(`${FRONT_URL}/dengYong-wenzhang/${data.id}`)
    },
    // 【编辑文章】 跳转到 editBlog页面
    editBlogInfo_Handle(data) {
      console.log('blogList组件中，通过点击修改把数据ID提交到【route】上：', data)
      this.$router.push({
        name: "EditBlog", //根据`Blog`找到路径
        params: {
          // 写路由地址的配置信息
          id: data.id
        }
      })
    },
    //   【删除一篇文章】
    delete_One_Blog_Handle(blogInfo) {
      // console.log(blogInfo, 'blogInfo-=-blogInfo')
      // 确定删除才执行 该API【deleteOneBlog】
      this.$confirm(`此操作将永久删除【${blogInfo.title}】文章所及信息, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // const index = this.data.findIndex(item => item.id === blogInfo.id);
        // if (index !== -1) {
        //   this.data.splice(index, 1); // 删除当前文章
        // }
        await deleteOneBlog(blogInfo.id)
        // //【删除后重新获取数据】
        this.getPageBlog_Data() //【删除后重新获取数据】
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        console.log(this.data, '删除后的dataaaaaaaaaaaaaaaaaaa')
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    // 页码条数改变触发
    sizeChange_Handle(page) {
      this.eachPage = parseInt(page)
      this.currentPage = 1
      this.pageCurrentPage = 1
      this.getPageBlog_Data()
    },
    // 当前页改变触发
    currentChange_Handle(page) {
      this.currentPage = page
      // this.pageCurrentPage = 1
      this.getPageBlog_Data() //【重新拿数据】
    },
    // 上一页
    prevClick_Handle() {
      this.currentPage -= 1
    },
    // 下一页
    nextClick_Handle() {
      this.currentPage += 1
    },
  }
}
</script>

<style lang="less" scoped></style>
